<template>
  <ShopLayout>
    <div class="bg-gray-100 min-h-screen">
      <div class="max-w-7xl mx-auto px-8 sm:px-16 lg:px-24 py-20">
        <!-- 页面标题 -->
        <div class="mb-8">
          <h1 class="text-3xl font-light text-gray-900">售后服务</h1>
          <p class="mt-2 text-gray-600">管理您的售后申请，查看处理进度</p>
        </div>

        <!-- 筛选器 -->
        <div class="bg-white rounded-2xl p-8 shadow-sm mb-6">
          <div class="flex items-center justify-between mb-6">
            <h3 class="text-xl font-light text-gray-900">筛选条件</h3>
            <button 
              @click="clearFilters"
              class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-xl hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
            >
              <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
              重置筛选
            </button>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-3">状态筛选</label>
              <div class="relative">
                <select 
                  v-model="filters.status" 
                  @change="applyFilters"
                  class="w-full px-4 py-3 pr-10 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900 appearance-none bg-white"
                >
                  <option value="">全部状态</option>
                  <option value="pending">待审核</option>
                  <option value="approved">已通过</option>
                  <option value="rejected">已拒绝</option>
                  <option value="processing">处理中</option>
                  <option value="completed">已完成</option>
                  <option value="cancelled">已取消</option>
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                  </svg>
                </div>
              </div>
            </div>
            
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-3">类型筛选</label>
              <div class="relative">
                <select 
                  v-model="filters.type" 
                  @change="applyFilters"
                  class="w-full px-4 py-3 pr-10 border border-gray-300 rounded-2xl shadow-sm focus:ring-2 focus:ring-gray-900 focus:border-gray-900 appearance-none bg-white"
                >
                  <option value="">全部类型</option>
                  <option value="return">退货</option>
                  <option value="refund">退款</option>
                  <option value="exchange">换货</option>
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                  <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                  </svg>
                </div>
              </div>
            </div>
            
            <div class="flex items-end">
              <button 
                @click="applyFilters"
                class="w-full px-6 py-3 text-sm font-medium text-white bg-gray-900 rounded-2xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
              >
                应用筛选
              </button>
            </div>
          </div>
        </div>

        <!-- 售后申请列表 -->
        <div class="bg-white rounded-2xl shadow-sm">
          <div v-if="requests.data.length === 0" class="text-center py-16">
            <div class="mx-auto h-16 w-16 text-gray-400 mb-6">
              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无售后申请</h3>
            <p class="text-gray-500 mb-6">您还没有提交过售后申请</p>
            <Link 
              :href="route('after-sales.create')"
              class="inline-flex items-center px-6 py-3 bg-gray-900 text-white rounded-2xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
            >
              申请售后服务
            </Link>
          </div>

          <div v-else class="divide-y divide-gray-100">
            <div 
              v-for="request in requests.data" 
              :key="request.id"
              class="p-8 hover:bg-gray-50 transition-colors duration-200"
            >
              <div class="flex items-start justify-between mb-6">
                <div class="flex-1">
                  <div class="flex items-center space-x-4 mb-4">
                    <div class="flex-1">
                      <div class="flex items-center space-x-3 mb-2">
                        <h3 class="text-xl font-light text-gray-900">
                          售后申请 #{{ request.id }}
                        </h3>
                        <span 
                          :class="getStatusBadgeClass(request.status)"
                          class="inline-flex items-center px-3 py-1 rounded-xl text-xs font-medium"
                        >
                          {{ getStatusText(request.status) }}
                        </span>
                        <span 
                          :class="getTypeBadgeClass(request.type)"
                          class="inline-flex items-center px-3 py-1 rounded-xl text-xs font-medium"
                        >
                          {{ getTypeText(request.type) }}
                        </span>
                      </div>
                      <div class="text-sm text-gray-600 space-y-1">
                        <p>订单号：<span class="font-medium">{{ request.order.order_number }}</span></p>
                        <p>申请时间：<span class="font-medium">{{ formatDate(request.created_at) }}</span></p>
                      </div>
                    </div>
                  </div>
                  
                  <div class="bg-gray-50 rounded-2xl p-4 mb-4">
                    <p class="text-gray-700 mb-2">
                      <span class="font-medium text-gray-900">申请原因：</span>{{ request.reason }}
                    </p>
                    <p v-if="request.description" class="text-gray-700">
                      <span class="font-medium text-gray-900">详细说明：</span>{{ request.description }}
                    </p>
                  </div>
                  
                  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                    <div class="flex items-center space-x-2">
                      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                      </svg>
                      <span class="text-gray-600">申请金额：</span>
                      <span class="font-medium text-gray-900">¥{{ request.requested_amount }}</span>
                    </div>
                    <div v-if="request.approved_amount" class="flex items-center space-x-2">
                      <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      <span class="text-gray-600">批准金额：</span>
                      <span class="font-medium text-gray-900">¥{{ request.approved_amount }}</span>
                    </div>
                  </div>
                </div>
                
                <div class="flex items-center space-x-3">
                  <Link 
                    :href="route('after-sales.show', request.id)"
                    class="px-6 py-3 text-sm font-medium text-white bg-gray-900 rounded-2xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
                  >
                    查看详情
                  </Link>
                  
                  <button 
                    v-if="request.can_cancel"
                    @click="cancelRequest(request)"
                    class="px-6 py-3 text-sm font-medium text-red-600 bg-red-50 rounded-2xl hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors"
                  >
                    取消申请
                  </button>
                </div>
              </div>
              
              <!-- 售后商品列表 -->
              <div v-if="request.items && request.items.length > 0" class="border-t border-gray-100 pt-6">
                <h4 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
                  <svg class="w-5 h-5 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
                  </svg>
                  售后商品
                </h4>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                  <div 
                    v-for="item in request.items" 
                    :key="item.id"
                    class="flex items-center space-x-4 p-4 bg-gray-50 rounded-2xl hover:bg-gray-100 transition-colors"
                  >
                    <img 
                      :src="item.order_item.product.image || '/images/product-placeholder.svg'"
                      :alt="item.order_item.product.name"
                      class="h-16 w-16 rounded-2xl object-cover border border-gray-200"
                    >
                    <div class="flex-1 min-w-0">
                      <p class="text-sm font-medium text-gray-900 truncate mb-1">
                        {{ item.order_item.product.name }}
                      </p>
                      <div class="space-y-1 text-xs text-gray-600">
                        <p>数量：<span class="font-medium">{{ item.quantity }}</span></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div v-if="requests.data.length > 0" class="mt-6">
          <Pagination :links="requests.links" />
        </div>
      </div>
    </div>
  </ShopLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Link, router } from '@inertiajs/vue3'
import ShopLayout from '@/Layouts/ShopLayout.vue'
import Pagination from '@/Components/Pagination.vue'

const props = defineProps({
  requests: Object,
  filters: Object
})

const filters = ref({
  status: props.filters?.status || '',
  type: props.filters?.type || ''
})

const applyFilters = () => {
  router.get(route('after-sales.index'), filters.value, {
    preserveState: true,
    replace: true
  })
}

const clearFilters = () => {
  filters.value = { status: '', type: '' }
  applyFilters()
}

const cancelRequest = (request) => {
  if (confirm('确定要取消这个售后申请吗？')) {
    router.post(route('after-sales.cancel', request.id), {}, {
      onSuccess: () => {
        // 刷新页面数据
        router.reload()
      }
    })
  }
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待审核',
    approved: '已通过',
    rejected: '已拒绝',
    processing: '处理中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

const getTypeText = (type) => {
  const typeMap = {
    return: '退货',
    refund: '退款',
    exchange: '换货'
  }
  return typeMap[type] || type
}

const getStatusBadgeClass = (status) => {
  const classes = {
    pending: 'bg-yellow-100 text-yellow-800',
    approved: 'bg-blue-100 text-blue-800',
    rejected: 'bg-red-100 text-red-800',
    processing: 'bg-purple-100 text-purple-800',
    completed: 'bg-green-100 text-green-800',
    cancelled: 'bg-gray-100 text-gray-800'
  }
  return classes[status] || 'bg-gray-100 text-gray-800'
}

const getTypeBadgeClass = (type) => {
  const classes = {
    return: 'bg-purple-100 text-purple-800',
    refund: 'bg-yellow-100 text-yellow-800',
    exchange: 'bg-green-100 text-green-800'
  }
  return classes[type] || 'bg-gray-100 text-gray-800'
}

const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}
</script>
